<template>
  <div class="daily">
    <mt-header title="日常打卡">
      <mt-button icon="back" slot="left" @click="goback">返回</mt-button>
      <mt-button class="dailyRule" slot="right" @click="goRule">签到规则</mt-button>
    </mt-header>
    <div v-transfer-dom>
      <x-dialog v-model="showToast" class="dialog-demo" hide-on-blur>
        <h3>签到规则</h3>
        <div class="rule-content">
          1.每日签到，获得逆袭豆实时累加；
          <br/> 2.连续签到，获得逆袭豆获取加速，加速规则如下：
          <br/> 第一天获得1颗逆袭豆；
          <br/> 连续签到两天获得2颗逆袭豆；
          <br/> 连续签到三天获得3颗逆袭豆；
          <br/> 连续签到四天获得4颗逆袭豆；
          <br/> 连续签到五天及以上获得5颗逆袭豆；
          <br/> 如签到中断则从1颗逆袭豆重新开始加速；
          <br/> 3.逆袭豆后续会开通兑换商城哦~
        </div>
        <button @click="closeRule" type="primary" class="iknow">我知道了</button>
      </x-dialog>
    </div>
    <div class="calendar-main">
      <p class="calendar-p">当前累计签到{{countDay}}天</p>
      <Calendar ref="Calendar" :markDate="arr2" @isToday.once="clickToday" changeMonth=2018-06-12 agoDayHide=1430115200></Calendar>
      <el-button @click.native="showPosition('middle')" class="elBtn" type="primary" :disabled="dailyAchieve" @click="submit">{{dailymsg}}</el-button>
      <!-- toast提示 -->
      <toast v-model="showPositionValue" type="text" :time="1200" is-show-mask :position="position" width="20rem">签到成功，逆袭豆+1</toast>
    </div>
  </div>
</template>

<script>
  import {
    TransferDomDirective as TransferDom
  } from "vux";
  import Calendar from "vue-calendar-component";
  import {
    Header
  } from "mint-ui";
  import {
    Z_DEFLATED
  } from 'zlib';
  import {
    getDaily_Axios,
    putDaily_Axios,
  } from './axios/api';
  export default {
    directives: {
      TransferDom,

    },
    data() {
      return {
        dailymsg: "签到有礼",
        isActive: "",
        dailyAchieve: false,
        dailyClass: "",
        isToday: "",
        position: "default",
        showPositionValue: false,
        showToast: false,
        countDay: 0,
        // consignNumber:1,
        // consignNumberS:1,        
        userId: sessionStorage.getItem('id'),
        arr2: [
          //为渲染日历的数组
        ]
      };
    },

    methods: {
      clickToday(data) {},
      reload() {
        this.isRouterAlive = false
        this.$nextTick(() => (this.isRouterAlive = true))
      },

      submit: function () {
        let userId = this.userId;
        
        // this.consignNumberS = this.consignNumber + 1;
        // console.log('this.consignNumber', this.consignNumber);
        // if(this.consignNumber >= 5){
        //   this.consignNumber = 5;
        // }
        
        putDaily_Axios(userId).then(response => {
            this.getDailyDay();
          })

      },
      goRule: function () {
        this.showToast = true;
      },
      closeRule: function () {
        this.showToast = false;
      },

      showPosition(position) {
        this.position = position;
        this.showPositionValue = true;
        
      },
      getDailyDay: function () {
        let userId = this.userId;
         getDaily_Axios(userId).then(response => {
            console.log('response', response);
            let checkedIn = response.data.data.detail;
            // this.consignNumber = response.data.data.consignNumber;
            
            
            
            checkedIn.forEach((element, index) => {
              if (element == 1) {
                let date = new Date();
                var checkDay = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + (index + 1);
                this.arr2.push(checkDay);
                let today = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
                if (today == checkDay) {
                  this.dailymsg = "完成签到";
                  this.dailyAchieve = true;
                  this.countDay = response.data.data.signTime;

                }

              }
            });
          });
      },

    },
    components: {
      Calendar
    },
    mounted() {
      this.getDailyDay();
    }
  };

</script>

<style lang="less" scoped>
  @import "~vux/src/styles/close";

  .dialog-demo {
    h3 {
      margin: 1rem;
      padding: 1rem;
      font-size: 1.6rem;
      border-bottom: 2px solid #999;
    }
    .rule-content {
      margin: 1rem;
      text-align: left;
      font-size: 1.2rem;
    }
    .iknow {
      width: 16rem;
      height: 3rem;
      margin: 1rem;
      border-radius: 0.5rem;
      font-size: 1.4rem;
      color: #fff;
      background: #409eff;
    }
    .weui-dialog {
      border-radius: 8px;
      padding-bottom: 8px;
    }
    .dialog-title {
      line-height: 30px;
      color: #666;
    }
    .img-box {
      height: 350px;
      overflow: hidden;
    }
    .vux-close {
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }

</style>
<!-- Add "scoped " attribute to limit CSS to this component only -->
<style lang="scss">
  .daily {
    height: 100vh;
    background: url("../assets/dailyBackground.png") no-repeat 0 4rem;
    background-size: 100% 100%;
  }

  .mint-button-text:first-child {
    font-size: 1.2rem;
    color: #fcd32d;
  }

  .wh_content_all {
    .wh_top_changge {
      display: none;
    }
    .wh_content {
      justify-content: center;
      padding: 0;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      background-color: #fcea6b;
      .wh_content_item {
        font-size: 1.2rem;
        height: 3rem;
        font-weight: 500;
        color: #5f2500;
        .wh_isToday {
          width: 100%;
          height: 5vh; // background: #4a7cca;
          background: url("../assets/今天.png")no-repeat 50% 50%;
          background-size: 80% 80%;
          color: rgba($color: #b4cff7, $alpha: 0);
        }
        .wh_isMark {
          width: 100%;
          height: 5vh; // background: #4a7cca;
          background: url("../assets/daily.png")no-repeat 50% 50%;
          background-size: 80% 80%;
          color: rgba($color: #b4cff7, $alpha: 0);
        }

      }
    }
  }

  .wh_other_dayhide {
    display: none;
  }

  .wh_content:last-child {
    padding: 0;
    justify-content: center;
    background-color: #fcba1a;
  }

  .wh_content:last-child>.wh_content_item {
    width: 12.2%;
    height: 5vh;
    pointer-events: none;
    margin: 0.6%;
    font-weight: 900;
    font-size: 1.2rem;
    border-radius: 0.5rem;
    color: #b4cff7;
    background-color: #fffbea;
  }

  .wh_container>.wh_content_all {
    width: auto;
    margin: 0 1.8rem;
    border-radius: 0.5rem;
    background-color: #fcba1a;
  }

  .wh_content>.wh_content_item>.wh_isMark {
    border-radius: 0.5rem;
  }

  .calendar-main {
    /* height: 29.5rem; */
    margin: 2.5rem;
    margin-top: 10rem;
    border-radius: 1rem;
    background-color: #fcd32d;
    .elBtn {
      border: none;
      margin: 0.8rem;
      height: 3rem;
      line-height: 0.7;
    }
  }

  .elBtn {
    color: #fff;
    background-color: #ee7600;
  }

  .calendar-p {
    height: 3.5rem;
    margin: 0 2.5rem;
    font-size: 1.2rem;
    text-align: right;
    line-height: 3.5rem;
    color: #5f2500;
  }

  .div {
    margin: auto;
    width: 220px;
    height: 44px;
    line-height: 44px;
    background: #0fc37c;
    color: #fff;
    font-size: 17px;
    text-align: center;
    margin-top: 20px;
  }

  .wh_item_date,
  .wh_top_tag {
    width: 100%;
    height: 5vh;
  }

</style>
